<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html, body {
  width: 100%;
  height: 100%;
  padding: 6px;
  margin: 0;
  overflow: hidden;
}

#main {
  position: relative;
  display: inline-block;
}

#panel, #typed {
  border: solid 1px #000;
  line-height: 1.5;
  white-space: pre-wrap;
  margin: 0;
  padding: 18px 6px 6px 6px;
  color: #0006;
}

#panel {
  width: 600px;
  min-height: 400px;
}
#panel:empty {
  cursor: pointer;
}
#panel:empty::after {
  content: '鼠标点击后开始';
}

#typed {
  max-width: 600px;
  position: absolute;
  top: 0;
  border-color: transparent;
  color: #008;
  background-color: #eea6;
  background-clip: content-box;
  overflow: hidden;
}
#typed:empty {
  background-color: transparent;
}

#starting {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
}

#countdown {
  position: absolute;
  top: 0;
  right: 10px;
  opacity: 0.3;
}
  </style>
</head>
<body>
  <div id="main">
    <div id="panel"></div> <!-- 显示系统生成的文本 -->
    <div id="typed"></div> <!-- 显示用户实际打印的文本 -->
    <div id="starting"></div> <!-- 显示开场倒计动画 -->
    <div id="countdown">00:00</div>
  </div>

  <script>
    const text = `If you already have experience making drawings with computers, you know that in that process you draw a circle, then a rectangle...
...
...Each pipe is also known as a thread.`

    const panel = document.getElementById('panel');
    panel.addEventListener('click', main);

    function wait(ms) {
      return new Promise((resolve) => {
        setTimeout(resolve, ms);
      });
    }

    async function starting(el, count = 3) {
      el.innerText = count;
      while(count--) {
        await wait(1000);
        el.innerText = count;
      }
      el.innerText = '';
    }

    const startingEl = document.getElementById('starting');

    async function main() {
      panel.innerText = text;
      await starting(startingEl);
    }

    async function countDown(el, sec) {
      while(sec--) {
        const minute = Math.floor(sec / 60 )
        const second = sec % 60
        const time = `${minute > 10 ? minute : `0${minute}`}:${secound > 10 ? second : `0${second}`}`
        el.innerText = time
        await wait(1000)
      }
    }

    async function typings(el, text) {
      for (let i = 0; i < text.length; i++) {
        const char = text[i]
        // el.innerText = '_'

        const key = await new Promise(resolve => {
          document.addEventListener('keydown', ({key}) => {
            if (key === char) {
              document.removeEventListener('keydown', f)
              resolve(key)
            }
          })
        })

        el.innerText = el.innerText.slice(0, -1) + key + '_';
      }
    }

    async function main() {
      pannel.innerText = text
      await starting(startingEl)
      const countDownPromise = countDown(countdownEl, 10)
      const typingPromise = typings(typedEl, text)
      await Promise.race([countDownPromise, typingPromise])
      console.log('结束');
    }

  </script>
</body>
</html>